<template>
 <div>
     <!-- <headNav title="业务名称" :isHome="false" :isBack="false"></headNav> -->
     <div class="proTit" @click="show = true">业务名称：{{proItem.productName ? proItem.productName : '未选择'}}</div>
     <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
     <div class="content" v-if="proData.length > 0" v-loadmore="loadmore">
             <div class="yeCont" v-for="(item,index) of proData" :key="index">
                <ul>
                    <li><div class="titP"><span>{{item.schoolName}}</span></div></li>
                    <li class="contLi" v-for="(item2,index) of item.divisionProportionList" :key="index">
                        <div class="liLeft"><span>{{item2.agentLevel}}级</span><p>{{item2.agentName}}</p></div>
                        <div class="liRight">
                            <span>{{item2.divisionModeDesc}}</span>
                            <p v-if="item2.divisionMode == 1">{{item2.shareProportion}}%</p>
                            <p v-if="item2.divisionMode == 0">{{item2.shareAmount}}元 / {{item2.totalAmount}}元</p>
                            <p v-if="item2.divisionMode== 2">{{item2.shareAmount}}元 / 用户</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="load-p">
                <van-loading v-if="isMore" size="24px" vertical>加载中...</van-loading>
                <van-loading v-else  size="0px" vertical class="loading">没有更多</van-loading>
            </div>
     </div>
     <div v-else class="zanwu">暂无数据</div>
     <bottomNav :index="2"></bottomNav>
 </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
export default {
  name: 'channel',
  components: {
    headNav,
    bottomNav
  },
  data() {
      return {
          show: false,
         actions: [],
         proItem:{},
         proData:[],
         pageIndex:0,
        pageSize:5,
        isMore:true
      }
  },
  mounted() {
      this.getProductList()
  },
  methods: {
    //   业务列表
     getProductList(){
         var prams = {}
         this.$store.dispatch('channel/SelectProductList',prams).then((res) => {
             res.data = res.data ? res.data : []
             for(var obj of res.data){
                 obj.name = obj.productName
             }
             this.actions = res.data
             if (res.data.length > 0) {
                this.proItem = res.data[0]
                this.getData()
            }
         })
     },
     onSelect(item) {
      this.show = false
      this.proItem = item
      this.getData()
    },
    loadmore () {
    // debugger
        this.getData()
    },
    // 分成比例数据
    getData(){
        if(!this.isMore){
                return
            }
            this.pageIndex++
         var prams = {
             productId:this.proItem.productId,
             limit:this.pageSize,
             page:this.pageIndex,
             order:'',
             sidx:'desc'
         }
         this.$store.dispatch('channel/ListProductSchoolAgentDivisionsById',prams).then((res) => {
             if(res.status == 200){
                 if(res.data.records.length < this.pageSize){
                        this.isMore = false
                    }
                  this.proData = this.proData.concat(res.data.records)
             }else{
                 this.$toast(res.msg)
                 this.isMore = false
             }
         })
     }
  },
}

</script>
<style scoped>
.content{
    height: calc(100% - 0.88rem);
    overflow: auto;
}
.yeCont{
    width: 6.72rem;
    /* height: 6.16rem; */
    background: #FFFFFF;
    box-shadow: 0rem 0.02rem 0.16rem 0rem rgba(0, 0, 0, 0.08);
    border-radius: 0.15rem;
    margin: 0 auto;
    margin-top: 0.3rem;
}
.titP{
    height: 0.96rem;
    width: 100%;    
    background: url('../../assets/img/titBk.png') no-repeat center;
    background-size: 100% 0.96rem;
    font-size: 0.32rem;
    color: #000;
    line-height: 0.96rem;
}
.titP span{
    margin-left: 0.3rem;
    font-weight: bold;
}
.contLi{
    height: 1.28rem;
    border-bottom: 1px solid #F5F5F5;
    margin: 0 0.3rem;
}
.liLeft{
    float: left;
}
.liLeft span{
    color: #4B7BF9;
    font-size: 0.28rem;
    display: inline-block;
    margin: 0.18rem 0;
}
.liLeft p{
    color: #000000;
    font-size: 0.24rem;
}
.liRight{
  float: right;
}
.liRight span{
    color: #666666;
    font-size: 0.24rem;
    display: block;
    margin: 0.2rem 0;
    text-align: right;
}
.liRight p{
    color: #FF352B;
    font-size: 0.28rem;
    text-align: right;
}
.proTit{
    height: 0.88rem;   
    background: #4B7BF9;
    line-height: 0.88rem;
    color: #FFFFFF;
    font-size: 0.32rem;
    text-align: center;
}
.zanwu{
    text-align: center;
    margin-top: 1rem;
    color: #999;
}
.load-p{
    padding: 1rem 0 0 0;
}
.noMore{
    text-align: center;
    color: #969799;
    font-size: 0.24rem;
}
</style>